import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, Modal,
    Steps, Card, Popover, Badge, Tooltip, Divider, message, Popconfirm,
    Form,
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import { routerRedux } from 'dva/router';
import querystring from 'querystring';
import { createDecipher } from 'crypto';

const FormItem = Form.Item;
const { Description } = DescriptionList;
const { TextArea } = Input;
const { Step } = Steps;
/*
  产品详情修改
*/

@connect(({ product, channel }) => ({
    product,channel
}))
@Form.create()
export default class ProductDetails extends PureComponent {
    state = {
        type: '',// 1是产品详情  2是产品审核  3是产品开通
        modalVisible: false,
        productId: '',
    };

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));
        dispatch({
            type: 'product/queryProductDetails',
            payload: {
                id: params.id,
            },
        });
        this.setState({
            type: params.type,
            productId: params.id,
        });
    }

    handleProductSubmit = () => {
        const { dispatch } = this.props;
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                // console.log("handleProductSubmit", values)
                dispatch({
                    type: 'product/dredgeProduct',
                    payload: {
                        
                    }
                });
            }
        });
    };

    handleProductCallback = () => {
        const { dispatch } = this.props;
        if (this.state.type == 3) {
            dispatch(routerRedux.push('/product/product-list'));
        } else {
            dispatch(routerRedux.push('/product/product-catalog'));
        }
    }

    handleRejected = () => {
        this.setState({
            modalVisible: true,
        })
    }
    handleAdustPrice = (item, e) => {
        const { dispatch } = this.props;
        item.adjustPrice = e.target.value;
        dispatch({
            type: 'channel/changeAddProduct',
            payload: {
                item
            },
        })
    }
    handleThroughSubmit = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'product/verifyProduct',
            payload: {
                id: this.state.productId,
                result: 1,
            },
            callback: () => {
                const { product: { productResult } } = this.props;
                if (productResult.code == '200') {
                    dispatch(routerRedux.push('/product/product-catalog'));
                    message.success("提交成功");
                } else {
                    message.error(productResult.message);
                }
            }
        });
    }

    handleOpinionOK = () => {
        const { dispatch } = this.props;
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                dispatch({
                    type: 'product/verifyProduct',
                    payload: {
                        id: this.state.productId,
                        result: 0,
                        ...values
                    },
                    callback: () => {
                        const { product: { productResult } } = this.props;
                        if (productResult.code == '200') {
                            this.setState({
                                modalVisible: false,
                            });
                            dispatch(routerRedux.push('/product/product-catalog'));
                            message.success("提交成功");

                        } else {
                            message.error(productResult.message);
                        }
                    }

                });
            }
        });
    }

    handleModalCancel = () => {
        this.setState({
            modalVisible: false,
        })
    }

    handleJudgeTitls = () => {
        if (this.state.type == 1) {
            return "产品详情"
        }
        if (this.state.type == 2) {
            return "产品审核"
        }
        if (this.state.type == 3) {
            return "产品开通"
        }
    }

    render() {
        const { selectedRows, modalVisible } = this.state;
        const { product: { productDetails, productLoading } } = this.props;
        const { getFieldDecorator, validateFieldsAndScroll } = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 20,
            },
        };
        const title = this.handleJudgeTitls();

        return (
            <PageHeaderLayout
                title={title}
            >
                {
                    // JSON.stringify(productDetails)
                }
                <Card
                    title="产品信息"
                    bordered={false}
                    loading={productLoading}
                    style={{ marginBottom: 24 }}
                >
                    <DescriptionList size="small" col="2">
                        <Description term="产品名称" style={{ marginBottom: 20 }}>{productDetails && productDetails.productName}</Description>
                        <Description term="产品种类" style={{ marginBottom: 20 }}>{productDetails && productDetails.productType == '1' ? '分期' : '贷款'}</Description>
                        <Description term="合作银行" style={{ marginBottom: 20 }}>{productDetails && productDetails.bankName}</Description>
                        <Description term="生效时间" style={{ marginBottom: 20 }}>{productDetails && productDetails.beginTime}~{productDetails && productDetails.timeValid == 1 ? '永久' : productDetails && productDetails.endTime}</Description>
                    </DescriptionList>
                    <DescriptionList size="small" col="1">
                        <Description term="产品描述">{productDetails && productDetails.productDesc}</Description>
                    </DescriptionList>
                </Card>
                <Card
                    title="产品价格"
                    bordered={false}
                    style={{ marginBottom: 24 }}
                >
                    {
                        productDetails.productDiviList &&
                        productDetails.productDiviList.map((item) => {
                            return (
                                <Form key={productDetails.productDiviList.id}>
                                    <Row >
                                        <Col span={12}>
                                            <FormItem label={`${item.nper}期手续费`} {...formItemLayout}>
                                                {item.price}%
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            {this.state.type != 3 ?
                                                <FormItem label="调整价格" {...formItemLayout}>
                                                    {item.price}%
                                                    </FormItem>
                                                :
                                                <FormItem label="调整价格" {...formItemLayout}>
                                                    {getFieldDecorator(`adjustPrice[${item.id}]`, {
                                                        initialValue: item.adjustPrice,
                                                    })(
                                                        <Input placeholder="请输入" style={{ width: '60%' }} onChange={this.handleAdustPrice.bind(this, item)} />
                                                    )}%
                                                </FormItem>
                                            }
                                        </Col>
                                    </Row>
                                </Form>
                            )
                        })
                    }
                    <Form>
                        <Row >
                            <Col span={12}>
                                {this.state.type == 2 || this.state.type == 1 ?
                                    <FormItem label="额度" {...formItemLayout}>
                                        {productDetails.productSize}
                                    </FormItem>
                                    :
                                    <FormItem label="额度" {...formItemLayout}>
                                        {getFieldDecorator('productSize', {
                                            initialValue: productDetails.productSize,
                                        })(
                                            <Input placeholder="请输入" style={{ width: '60%' }} />
                                        )
                                        }
                                    </FormItem>
                                }
                            </Col>
                        </Row>
                    </Form>
                    <div style={{ marginTop: 50 }}>
                        <span>
                            {this.state.type == 2 ?
                                <div>
                                    <Button type="primary" onClick={this.handleThroughSubmit} loading={productLoading}>通过</Button>
                                    <Button onClick={this.handleRejected} style={{ marginLeft: 30 }}>驳回</Button>
                                    <Button onClick={this.handleProductCallback} style={{ marginLeft: 30 }}>返回</Button>
                                </div>
                                :
                                <div>
                                    {this.state.type == 3 ?
                                        <div>
                                            <Button type="primary" onClick={this.handleProductSubmit} >提交</Button>
                                            <Button onClick={this.handleProductCallback} style={{ marginLeft: 30 }}>返回</Button>
                                        </div>
                                        :
                                        <Button onClick={this.handleProductCallback} style={{ marginLeft: 30 }}>返回</Button>
                                    }
                                </div>
                            }
                        </span>
                    </div>
                </Card>
                <Modal
                    title='驳回意见'
                    keyboard={true}
                    visible={this.state.modalVisible}
                    onOk={this.handleOpinionOK}
                    loading={productLoading}
                    onCancel={this.handleModalCancel}
                >
                    <Form>
                        <FormItem>
                            {getFieldDecorator('verifyNote', {
                            })(
                                <TextArea rows={4} placeholder="请输入驳回意见" />
                            )
                            }
                        </FormItem>
                    </Form>
                </Modal>
            </PageHeaderLayout>
        );
    }
}
